<template>
	<view class="dalle-index" ref="uv-back-top" style="">
		<uv-form labelPosition="left" :model="dalle" :rules="rules" ref="form">
			<!-- <uv-form-item labelWidth="80" label="模型" prop="dalle.mode" borderBottom>
				<uni-data-select v-model="dalle.mode" :localdata="range"></uni-data-select>
			</uv-form-item> -->
			<view class="">
				图片比例
			</view>
			<uv-form-item labelWidth="110" label="" prop="dalle.size" borderBottom>
				<view class="imgrate">
					<view v-for="(item,index) in ratioSize" :key="item.text"
						:class="dalle['size'] == item.value?'item_ss cursor-pointer item_ss_acting':'item_ss cursor-pointer'"
						@click="dalle['size'] = item.value">
						<view style="height: 70%;display: flex;justify-content: center;align-items: center;">
							<view class="item_xx" :style="[{
								width: $uv.addUnit(clacRate(item)[0]),
									height: $uv.addUnit(clacRate(item)[1])
								}]">
							</view>
						</view>
						<view class="item_text">{{item.text}}</view>
					</view>
				</view>
			</uv-form-item>
			<uv-form-item labelWidth="80" label="画质" prop="dalle.quality" borderBottom>
				<uni-data-select :clear="false" v-model="dalle.quality" :localdata="quality"></uni-data-select>
			</uv-form-item>
			<view class="demo-input-suffix" style="margin-top: 10px;">
				<target ref="target" title="创意描述" v-model="dalle.prompt" :disabled.sync="disabled"></target>
				<el-input @focus="$emit('focus')" style="margin-top: 5px;"
					placeholder="描写图片详情,如:谁,长什么样,什么时候,在哪里,做什么,画面细节什么样" type="textarea"
					:autosize="{ minRows: 4, maxRows: 5}" maxlength="4000" v-model="dalle.prompt">
				</el-input>
			</view>
			<view class="demo-input-suffix" style="margin-top: 10px;height: 0px;opacity: 0;">
				创意示例：
				<el-link disabled style="font-size: 12px;" type="primary" @click="copy(copys)">{{copys}}</el-link>
			</view>
			<view style="display: flex;justify-content: space-between;">
				<uv-button :disabled="disabled" style="width: 49%;" type="primary" text="提 交"
					customStyle="margin-top: 10px" @click="submit"></uv-button>
				<uv-button style="width: 49%;" type="error" text="清 空" customStyle="margin-top: 10px"
					@click="reset"></uv-button>
			</view>
		</uv-form>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	// 引入
	import tabbars from '@/components/tabbar/tabbar';
	import {
		task,
		index,
		taskId,
		getScroll,
		scroll,
	} from '@/common/api.js';
	import config from '@/common/config';
	import target from '@/components/target/target.vue';
	export default {
		components: {
			// 注册组件
			target,
		},
		props: {
			minWidth: {
				type: [Number, String],
				default: 1
			},
			aside: {
				type: Boolean,
				default: false
			},
			deepColor: {
				type: String,
				default: '#4D4D4D'
			},
			shallowColor: {
				type: String,
				default: '#808080'
			},
			lightColor: {
				type: String,
				default: '#ccc'
			},
			type: {
				type: String,
				default: 'dalle'
			},
			// ailist: Array,
			dalleInfo: {
				type: Object,
				default: () => ({})
			},
		},
		data() {
			return {
				fill: config.fill,
				tabbarsValue: 'painting',
				scrollTop: 0,
				isFirstLoad: true, // 标志变量，用于判断是否首次加载
				id: '',
				data: [],
				createdAt: '',
				radiosval: 0,
				copys: '一个棕色头发的中国女孩穿着连衣裙在夏日午后的咖啡店里吃苹果油画风格，极致细节，中景',

				disabled: false,
				ai: "painting",
				messages: [],
				quality: [{
					value: 'standard',
					text: "标准"
				}, {
					value: 'hd',
					text: "增强细节"
				}],
				dalle: {
					model: 'dall-e-3',
					size: '1024x1024',
					quality: 'standard',
				},
				range: [{
					value: 'dall-e-3',
					text: "dall-e-3"
				}, ],
				ratioSize: [{
					text: '1:1',
					value: '1024x1024',
				}, {
					text: '9:16',
					value: '1024x1792',
				}, {
					text: '16:9',
					value: '1792x1024',
				}],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		watch: {
			// 监听data数据的变化
			// dalle: {
			// 	handler: function(newVal, oldVal) {
			// 		this['config_' + this.tabbarsValue][this.type] = newVal
			// 		this.$uv.vuex('config_' + this.tabbarsValue, this['config_' + this.tabbarsValue]);
			// 	},
			// 	deep: true
			// },
			dalleInfo: {
				handler(newVal) {
					this.reset();
					this.dalle = newVal;
					if (JSON.stringify(newVal) != "{}") {
						this.analysis();
					}
				},
				immediate: true
			}
		},
		mounted() {
			this.tabbarsValue = this.pages();
			this.reset();
			if (JSON.stringify(this.dalleInfo) != "{}") {
				this.dalle = this.dalleInfo;
				this.analysis();
			}
		},
		methods: {
			analysis() {
				this.dalle.prompt = this.dalle.prompt.split(' --ar ')[0];
			},
			clacRate(e) {
				let w = e.text.split(':')[0];
				let h = e.text.split(':')[1];
				if (w * 10 < 20 || h * 10 < 20) {
					w = w * 25;
					h = h * 25;
				} else if (w * 5 < 20 || h * 5 < 20) {
					w = w * 9;
					h = h * 9;
				} else {
					w = w * 2.5;
					h = h * 2.5;
				}
				return [w, h];
			},
			copy(text) {
				var that = this;
				text = text.replace(/```/g, '');
				text = text.replace(/###/g, '');
				uni.setClipboardData({
					data: text,
					success: function() {
						that.$refs.toast.show({
							message: "复制成功"
						})
					},
					complete: function() {
						uni.hideToast();
					}
				});
			},
			submit(e) {
				var that = this;
				if (this.dalle && this.dalle.prompt) {
					this.disabled = true;
					this.$emit('focus');
					this.$emit('dalle', this.dalle);
					setTimeout(function() {
						that.disabled = false;
					}, 3000)
				} else {
					this.$refs.toast.show({
						type: 'error',
						message: "创意描述为空！"
					})
				}
			},
			reset() {
				if(this.$refs.target) this.$refs.target.clear();
				this.dalle = {
					quality: 'standard',
					n: 1,
					size: '1024x1024',
					model: 'dall-e-3',
				};
			},
			formatValue(val, name) {
				this.dalle[name] = val / 100;
				return val / 100;
			},
			pages() {
				var pages = getCurrentPages() // 获取栈实例
				let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
				let currentPage = pages[pages.length - 1]['$page']['fullPath'] //当前页面路径(带参数)
				return currentPage.split('/')[2];
			},
			cTime(time1, data, index) {
				if (index == 0) {
					return true;
				}
				// console.log(" ” " + Number(data.length - 1));
				if (index == Number(data.length - 1)) {
					return false;
				}
				var time2 = data[index + 1] && data[index + 1].createdAt;
				if (!time1 || !time2) {
					return false;
				}
				// console.log(time1 + " 《=》 " + time2);
				// 将时间转换为Date对象
				var date1 = new Date(time1).getTime();
				var date2 = new Date(time2).getTime();
				// 计算时间差（毫秒）
				var difference = Math.abs(date2 - date1);
				// 将时间差转换为分钟
				var minutes = Math.ceil(difference / (1000 * 60)); // 向上取整
				if (minutes > 20) {
					return true;
				} else {
					return false;
				}
			},
			times(time) {
				return " -- " + uni.$uv.timeFrom(new Date(time).getTime()) + " -- ";
			},
			routes(url) {
				this.routed('/pages' + url);
			},
			routed(url) {
				uni.$uv.route({
					url: url,
					intercept(params, next) {
						uni.showLoading({
							title: '等待中...'
						})
						// 模拟处理等待
						setTimeout(() => {
							uni.hideLoading();
							next(true);
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "@/uni_modules/uv-ui-tools/index.scss";

	.dalle-index {
		transition: width 2s;
		margin-top: 10px;
		width: 100%;
		// height: 100%;

		.imgrate {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			width: 100%;

			.item_ss {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				border: 1px solid #cccccc;
				border-radius: 5px;
				width: 60px;
				height: 70px;
				color: #666666;
				margin-bottom: 10px;

				.item_xx {
					background: linear-gradient(to left, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) left top no-repeat,
						linear-gradient(to bottom, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) left top no-repeat,
						linear-gradient(to left, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) right top no-repeat,
						linear-gradient(to bottom, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) right top no-repeat,
						linear-gradient(to left, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) left bottom no-repeat,
						linear-gradient(to bottom, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) left bottom no-repeat,
						linear-gradient(to left, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) right bottom no-repeat,
						linear-gradient(to left, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) right bottom no-repeat;
					background-size: 2px 6px, 6px 2px, 2px 6px, 6px 2px;
					// background-color: #d0e2f5;
					margin-top: 0px;
					background-color: #cccccc;
					border: 1px solid #fff;
				}

				.item_text {
					text-align: center;
					height: 30%;
					padding: 2px 5px;
					bottom: 0px;
				}
			}

			.item_ss_acting {
				border: 1px solid #C6000B;

				.item_xx {
					background-color: #C6000B;
					border: 1px solid #fdff7b;
				}

				.item_text {
					color: #C6000B;
				}
			}
		}

	}
</style>